<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="节点" name="1">
      <el-row>
        <el-col :span="8">边框颜色</el-col>
        <el-col :span="14">
          <el-input type="color" v-model="nodeAttr.nodeStroke" style="width: 100%" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">边框宽度</el-col>
        <el-col :span="12">
          <el-slider :min="1" :max="5" :step="1" v-model="nodeAttr.nodeStrokeWidth" />
        </el-col>
        <el-col :span="2">
          <div class="result">{{ nodeAttr.nodeStrokeWidth }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">填充颜色</el-col>
        <el-col :span="14">
          <el-input type="color" v-model="nodeAttr.nodeFill" style="width: 100%" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">节点宽度</el-col>
        <el-col :span="14">
          <el-input v-model.number="nodeAttr.nodeWidth"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">节点高度</el-col>
        <el-col :span="14">
          <el-input v-model="nodeAttr.nodeHeight"></el-input>
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="文本" name="2">
      <el-row>
        <el-col :span="8">标题</el-col>
        <el-col :span="14">
          <el-input v-model="nodeAttr.nodeText" style="width: 100%" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">字体大小</el-col>
        <el-col :span="12">
          <el-slider :min="8" :max="16" :step="1" v-model="nodeAttr.nodeFontSize" />
        </el-col>
        <el-col :span="2">
          <div class="result">{{ nodeAttr.nodeFontSize }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">字体颜色</el-col>
        <el-col :span="14">
          <el-input type="color" v-model="nodeAttr.nodeColor" style="width: 100%" />
        </el-col>
      </el-row>
      <el-row>
        <el-col>排列方式</el-col>
        <el-col>
          <el-select v-model="nodeAttr.nodeTextDirection">
            <el-option value="横向"></el-option>
            <el-option value="纵向"></el-option>
          </el-select>
        </el-col>
      </el-row>
    </el-tab-pane>

    <!--差值-->
    <el-tab-pane label="属性" name="3" v-if="gateName === '差值'">
      <el-row>
        <el-col :span="8">被减数：<span style="color:#e88080;">*</span></el-col>
        <el-col :span="14">
          <el-input v-model="nodeAttr.minuend" style="width: 100%" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">减数：<span style="color:#e88080;">*</span></el-col>
        <el-col :span="14">
          <el-input v-model="nodeAttr.subtrahend" style="width: 100%" />
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="参数" name="4" v-if="gateName === '差值'">
      <el-row>
        <el-col :span="8">参数1 <span style="color:#e88080;">*</span></el-col>
        <el-col :span="14">
          <el-input v-model="nodeAttr.param1" style="width: 100%" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">参数2 <span style="color:#e88080;">*</span></el-col>
        <el-col :span="14">
          <el-input v-model="nodeAttr.param2" style="width: 100%" />
        </el-col>
      </el-row>
    </el-tab-pane>
    <!--    对比-->
    <el-tab-pane label="属性" name="3" v-if="gateName === '对比'">
      <el-row>
        <el-col :span="8">对比值：<span style="color:#e88080;">*</span></el-col>
        <el-col :span="14">
          <el-input v-model="nodeAttr.value" style="width: 100%" />
        </el-col>
        <!--              <el-col :span="24">-->
        <!--                <div style="text-align:center">该节点无属性</div>-->
        <!--              </el-col>-->
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="参数" name="4" v-if="gateName === '对比'">
      <el-row>
        <el-col :span="8">参数1 <span style="color:#e88080;">*</span></el-col>
        <el-col :span="14">
          <el-input v-model="nodeAttr.param1" style="width: 100%" />
        </el-col>
      </el-row>
    </el-tab-pane>
    <!--    阈值-->
    <el-tab-pane label="属性" name="3" v-if="gateName === '阈值'">
      <el-row>
        <el-col :span="8">上限 <span style="color:#e88080;">*</span></el-col>
        <el-col :span="14">
          <el-input v-model="nodeAttr.upperLimit" style="width: 100%" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">下限 <span style="color:#e88080;">*</span></el-col>
        <el-col :span="14">
          <el-input v-model="nodeAttr.lowerLimit" style="width: 100%" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">是否取等 <span style="color:#e88080;">*</span></el-col>
        <el-col :span="14">
          <el-select v-model="nodeAttr.equal" :options="equalOptions" />
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="参数" name="4" v-if="gateName === '阈值'">
      <el-row>
        <el-col :span="8">参数1 <span style="color:#e88080;">*</span></el-col>
        <el-col :span="14">
          <el-input v-model="nodeAttr.param1" style="width: 100%" />
        </el-col>
      </el-row>
    </el-tab-pane>


  </el-tabs>
</template>

<script lang="ts" setup>
import { defineComponent, reactive, watch, toRefs, ref, nextTick } from "vue";
import { FlowGraph } from '../../common/FlowGraph';

const props = defineProps({
  // height: {
  //   type: Number,
  //   default: () => {
  //     return 100
  //   }
  // },
  id: {
    type: String,
    required: true,
  },
})

const activeName = ref('1')

const equalOptions = [
  {
    label: '是',
    value: true
  },
  {
    label: '否',
    value: false
  },
]

const tabValue = ref('2')

interface IFNodeAttr {
  nodeText: string;
  nodeStroke: string;
  nodeWidth: number;
  nodeHeight: number;
  nodeStrokeWidth: number;
  nodeFill: string;
  nodeFontSize: number;
  nodeColor: string;
  nodeUsers: string;
  nodeTextDirection: string;
  //  阈值属性
  upperLimit?: string;
  lowerLimit?: string;
  equal: boolean;
  // 对比属性
  value?: string;
  // 差值属性
  minuend?: string;  //被减数
  subtrahend?: string;  //减数
  // 参数
  param1?: string,
  param2?: string,
}

let gateName = ref([])
const isByIdGetInfo = ref(false);
const nodeAttr = reactive<IFNodeAttr>({
  nodeText: '',
  nodeWidth: 100,
  nodeStroke: '#5F95FF',
  nodeStrokeWidth: 1,
  nodeFill: '#ffffff',
  nodeFontSize: 12,
  nodeColor: '#080808',
  nodeUsers: '',
  upperLimit: '',
  lowerLimit: '',
  equal: true,
  minuend: '',
  subtrahend: '',
  value: '',
  param1: "",
  param2: "",
  nodeTextDirection: '横向',
});
const { id } = toRefs(props);
const getNode = (id: string) => {
  const cell = FlowGraph.graph.getCellById(id);
  if (!cell || !cell.isNode()) {
    return null;
  }
  return cell;
};

watch(() => nodeAttr.nodeText, () => {  //监听文本标题改变，控制元素宽度
  if (isByIdGetInfo.value) return;
  const cell = getNode(id.value);
  if (!cell) {
    return;
  }
  cell.size(100 + cell.prop('attrs/text/text').length * 6, cell.size().height);
})


watch(nodeAttr, () => {
  // 如果是根据 id 获取详情引起的变化则不必触发后续操作
  if (isByIdGetInfo.value) return;
  const cell = getNode(id.value);
  if (!cell) {
    return;
  }

  cell.attr('body/stroke', nodeAttr.nodeStroke);
  cell.attr('body/strokeWidth', nodeAttr.nodeStrokeWidth);
  cell.attr('body/fill', nodeAttr.nodeFill);
  cell.attr('body/width', nodeAttr.nodeWidth)

  // cell.attr('width', nodeAttr.nodeWidth);
  let str = nodeAttr.nodeText

  if (nodeAttr.nodeTextDirection === '纵向') {
    str = str.split('').join('\n')
  } else if (nodeAttr.nodeTextDirection === '横向') {
    str = str.replace(/[\r\n]+/g, '')
  }
  cell.size(nodeAttr.nodeWidth, nodeAttr.nodeHeight)
  cell.attr('text/text', str);
  cell.attr('text/fontSize', nodeAttr.nodeFontSize);
  cell.attr('text/fill', nodeAttr.nodeColor);
  cell.attr('approve/users', nodeAttr.nodeUsers);
  // 节点属性
  // 差值
  cell.prop('propertyList/minuend', nodeAttr.minuend)
  cell.prop('propertyList/subtrahend', nodeAttr.subtrahend)
  // 对比
  cell.prop('propertyList/value', nodeAttr.value)
  // 阈值
  cell.prop('propertyList/upperLimit', nodeAttr.upperLimit)
  cell.prop('propertyList/lowerLimit', nodeAttr.lowerLimit)
  cell.prop('propertyList/equal', nodeAttr.equal)
  // 节点参数
  if (nodeAttr.param2) {  //如果节点填了两个参数
    cell.prop('paramList', [nodeAttr.param1, nodeAttr.param2].join(';'))
  } else {          // 只有一个参数
    cell.prop('paramList', nodeAttr.param1)
  }


  // cell.prop().propertyList.lowerLimit = nodeAttr.lowerLimit
  // console.log("cell",cell.getZIndex())
  // console.log("attr",cell)
  // console.log("propAll", cell.prop())
  // console.log("prop", cell.prop('size'))
  // console.log("prop2", cell.prop('attrs/text/text').length)
  // console.log("size", cell.size())

  // if(nodeAttr.nodeText){ //文本》标题更改了？改变node的宽度：不动
  //   cell.size(100+16+cell.prop('attrs/text/text').length*6,cell.size().height)
  // }

  //


});
watch(id, () => {
  const cell = getNode(id.value);

  if (!cell) {
    return;
  }
  tabValue.value = '1'
  // nodeProps.value = cell.prop()?.props
  gateName.value = cell.prop().name
  nodeAttr.upperLimit = cell.prop()?.propertyList?.upperLimit;
  nodeAttr.lowerLimit = cell.prop()?.propertyList?.lowerLimit;
  nodeAttr.equal = cell.prop()?.propertyList?.equal;
  nodeAttr.value = cell.prop()?.propertyList?.value;
  nodeAttr.minuend = cell.prop()?.propertyList?.minuend;
  nodeAttr.subtrahend = cell.prop()?.propertyList?.subtrahend
  // 初始化参数数据
  nodeAttr.param1 = cell.prop()?.paramList?.split(';')[0]
  nodeAttr.param2 = cell.prop()?.paramList?.split(';')[1]
  isByIdGetInfo.value = true;
  nodeAttr.nodeStroke = cell.attr('body/stroke');
  nodeAttr.nodeWidth = cell.size().width;
  nodeAttr.nodeHeight = cell.size().height;
  nodeAttr.nodeStrokeWidth = cell.attr('body/strokeWidth');
  nodeAttr.nodeFill = cell.attr('body/fill');
  nodeAttr.nodeText = cell.attr('text/text');
  nodeAttr.nodeFontSize = cell.attr('text/fontSize');
  nodeAttr.nodeColor = cell.attr('text/fill');
  nodeAttr.nodeUsers = cell.attr('approve/users');
  nextTick(() => {
    isByIdGetInfo.value = false;
  });

});

// export default defineComponent({
//   name: 'ConfigNode',
//   props: {
//     id: {
//       type: String,
//       required: true,
//     },
//   },
//   setup(props) {
//     //
//
//     return {
//       nodeAttr,
//       gateName,
//       tabValue,
//       equalOptions
//     };
//   },
// });
</script>

<style lang="scss" scoped></style>
